{% extends 'web/layout/manage.html' %}
{% load static %}
{% load issues %}
{% block css %}
    <link rel="stylesheet" href="{% static 'web/plugin/editor.md-master/css/editormd.min.css' %}">
    <link rel="stylesheet" href="{% static 'web/plugin/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css' %}">
    <link rel="stylesheet" href="{% static 'web/plugin/bootstrap-select-1.13.14/dist/css/bootstrap-select.min.css' %}">
    <link rel="stylesheet" href="{% static 'web/plugin/bootstrap-select-1.13.14/dist/css/bootstrap-select.min.css' %}">
    <link rel="stylesheet" href="{% static 'web/plugin/select2-4.1.0-rc.0/dist/css/select2.min.css' %}">
    <style>
        .issues-list .number{
            width: 100px;
            text-align: right;
        }
        .issues-list .number a {
            font-weight: 500;
            padding: 0 10px;
        }
        .issues-list .issue .tags{
            padding: 10px 0;
        }
        .issues-list .issue .tags span{
            margin-right: 20px;
            display: inline-block;
            font-size: 12px;
        }
        .issues-list .issue .tags .type{
            color: white;
            padding: 1px 5px;
            border-radius: 5px;
            background-color: #ddffdd;
        }
        .pd-0{
            padding: 0 !important;
        }
        .error-msg{
            color: red;
        }
        /* 左面筛选的样式 */
        .filter-area .item{
            margin-bottom:15px;
        }
        .filter-area .item .title{
            padding:5px 0;
        }
        .filter-area .item .check-list a {
            text-decoration:none;
            display:inline-block;
            min-width:65px
        }
        .filter-area .item .check-list label {
            font-weight:200;
            font-size:13px;
            margin-left:3px;
        }
        .filter-area .item .check-list a:hover {
            font-weight:200;
        }
        .filter-area .item .check-list .cell {
            margin-right:10px;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="container-fluid clearfix" style="padding: 20px 0;">
        <div class="col-sm-3">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-search" aria-hidden="true"></i>
                    筛选
                </div>
                <div class="panel-body filter-area">
                    {% for filter in filter_list %}
                        <div class='item'>
                            <div class="title">{{ filter.title }}</div>
                            <div class="check-list">
                                {% for item in filter.filter %}
                                    {{ item }}
                                {% endfor %}
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="col-sm-9">
            <div class="panel panel-default">

                <div class="panel-heading">
                    <i class="fa fa-quora" aria-hidden="true"></i>
                    问题
                </div>
                <div class="panel-body ">
                    <a class="btn btn-success btn-sm" data-toggle="modal" data-target="#addModal">新建问题</a>
                    <a class="btn btn-primary btn-sm" data-toggle="modal" data-target="#inviteModal">邀请成员</a>
                </div>
                <table class="table">
                    <tbody class="issues-list">
                    {% for item in issues_object_list %}
                        <tr>
                            <td class="number">
                                <i class="fa fa-circle text-{{ item.priority }}"></i>
                                <a target="_blank" href="{% url 'issues_detail' project_id=request.tracer.project.id issues_id=item.id%}">
                                    {% string_just item.id %}</a> <!-- 运行templatetags中issues.py里面的定制化函数 -->
                            </td>
                            <td class="issue">
                                <div>
                                    <a target="_blank" href="{% url 'issues_detail' project_id=request.tracer.project.id issues_id=item.id %}">
                                        {{ item.subject }}</a>
                                </div>
                                <div class="tags">
                                    <span class="type" style="background-color: #56b8eb">{{ item.issues_type.title }}</span>
                                    <span>
                                        <i class="fa fa-refresh" aria-hidden="true"></i>
                                        {{ item.get_status_display }}
                                    </span>
                                    {% if item.assign %}
                                        <span>
                                            <i class="fa fa-hand-o-right" aria-hidden="true"></i>
                                            {{ item.assign.username }}
                                        </span>
                                    {% endif %}
                                    <span>
                                        <i class="fa fa-user-o" aria-hidden="true"></i>
                                        {{ item.creator.username }}
                                    </span>
                                    {% if item.assign %}
                                        <span>
                                            <i class="fa fa-calendar" aria-hidden="true"></i>
                                            {{ item.end_date }}
                                        </span>
                                    {% endif %}
                                    <span>
                                        <i class="fa fa-clock-o" aria-hidden="true"></i>
                                        {{ item.latest_update_datetime }}
                                    </span>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <!-- 分页 -->
            <!-- <nav aria-label="...">
              <ul class="pagination">
                <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
                <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
             </ul>
           </nav> -->
            <div style="margin-top: -25px">
                <ul class="pagination">
                    {{ page_string }}
                </ul>
            </div>
        </div>

    </div>
    <!-- Large modal -->
    <div id="addModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">x</span>
                </button>
                <h4 class="modal-title" id="myModallabel">新建问题</h4>
            </div>
            <div class="modal-body" style="padding-right: 40px;">
                <form id="addForm" class="form-horizontal">
                    <!-- {% for field in form %}
                        <div class="form-group">
                            <label for="{{ field.id_for_label }}" class="col-sm-2 control-label">{{ field.label }}</label>
                            <div class="col-sm-10">
                                {{ field }}
                                <span class="error-msg">{{ field.errors.0 }}</span>
                            </div>
                        </div>
                    {% endfor %} -->
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="{{ form.issues_type.id_for_label }}"
                            class="col-sm-2 control-label">{{ form.issues_type.label }}</label>
                        <div class="col-sm-10">
                            <div>
                                <div>
                                    {{ form.issues_type }}
                                </div>
                                <div class="error-msg"></div>
                            </div>
                            <div class="error-msg"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="{{ form.subject.id_for_label }}"
                            class="col-sm-2 control-label">{{ form.subject.label }}</label>
                        <div class="col-sm-10">
                            <div>
                                <div>
                                    {{ form.subject }}
                                </div>
                                <div class="error-msg"></div>
                            </div>
                            <div class="error-msg"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="{{ form.module.id_for_label }}"
                            class="col-sm-2 control-label">{{ form.module.label }}</label>
                        <div class="col-sm-10">
                            <div>
                                <div>
                                    {{ form.module }}
                                </div>
                                <div class="error-msg"></div>
                            </div>
                            <div class="error-msg"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="{{ form.desc.id_for_label }}"
                            class="col-sm-2 control-label">{{ form.desc.label }}</label>
                        <div class="col-sm-10">
                            <div>
                                <div id="editor">
                                    {{ form.desc }}
                                </div>
                                <div class="error-msg"></div>
                            </div>
                            <div class="error-msg"></div>
                        </div>
                    </div>
                    <div class="form-group clearfix">
                        <div class="col-md-6 pd-0">
                            <label for="{{ form.status.id_for_label }}" class="col-md-4 control-label">{{ form.status.label }}</label>
                            <div class="col-md-8 clearfix">
                                <div>
                                    {{ form.status }}
                                </div>
                                <div class="error-msg"></div>
                            </div>
                        </div>
                        <div class="col-md-6 pd-0">
                            <label for="{{ form.priority.id_for_label }}" class="col-md-4 control-label">{{ form.priority.label }}</label>
                            <div class="col-md-8">
                                <div>
                                    {{ form.priority }}
                                </div>
                                <div class="error-msg"></div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group clearfix">
                        <div class="col-md-6 pd-0">
                            <label for="{{ form.assign.id_for_label }}" class="col-md-4 control-label">{{ form.assign.label }}</label>
                            <div class="col-md-8 clearfix">
                                    {{ form.assign }}
                                <div class="error-msg"></div>
                            </div>
                        </div>
                        <div class="col-md-6 pd-0">
                            <label for="{{ form.attention.id_for_label }}" class="col-md-4 control-label">{{ form.attention.label }}</label>
                            <div class="col-md-8">
                                    {{ form.attention }}
                                <div class="error-msg"></div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group clearfix">
                        <div class="col-md-6 pd-0">
                            <label for="{{ form.start_date.id_for_label }}" class="col-md-4 control-label">{{ form.start_date.label }}</label>
                            <div class="col-md-8">
                                <div class="input-group">
                                    <span class="input-group-addon" id="sizing-addon2">
                                        <i class="fa fa-calendar" aria-hidden="true"></i>
                                    </span>
                                    {{ form.start_date }}
                                </div>
                                <span class="error-msg"></span>
                            </div>
                        </div>
                        <div class="col-md-6 pd-0">
                            <label for="{{ form.end_date.id_for_label }}" class="col-md-4 control-label">{{ form.end_date.label }}</label>
                            <div class="col-md-8">
                                <div class="input-group">
                                    <span class="input-group-addon" id="sizing-addon2">
                                        <i class="fa fa-calendar" aria-hidden="true"></i>
                                    </span>
                                    {{ form.end_date }}
                                </div>
                                <span class="error-msg"></span>
                            </div>
                        </div>

                    </div>
                    <div class="form-group clearfix">
                        <div class="col-md-6 pd-0">
                            <label for="{{ form.mode.id_for_label }}" class="col-md-4 control-label">{{ form.mode.label }}</label>
                            <div class="col-md-8 clearfix">
                                <div>
                                    {{ form.mode }}
                                </div>
                                <div class="error-msg"></div>
                            </div>
                        </div>
                        <div class="col-md-6 pd-0">
                            <label for="{{ form.parent.id_for_label }}" class="col-md-4 control-label">{{ form.parent.label }}</label>
                            <div class="col-md-8">
                                <div>
                                    {{ form.parent }}
                                </div>
                                <div class="error-msg"></div>
                            </div>
                        </div>
                    </div>

                </form>
            </div>
             <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                <button type="button" class="btn btn-primary" id="btnAddSubmit">添 加</button>
            </div>
        </div>
      </div>
    </div>
    <!-- 邀请码对话框 -->
    <div id="inviteModal" class="modal fade in" role="dialog" >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">x</span>
                </button>
                <h4 class="modal-title" id="myModallabel">邀请成员</h4>
            </div>
            <div class="modal-body" style="padding-right: 40px;">
                <form id="inviteForm">
                    {% csrf_token %}
                    {% for item in invite_form %}
                    <div class="form-group">
                        <label for="{{ item.id_for_label }}">{{ item.label }}</label>
                        <span>{% if item.help_text %} ({{ item.help_text }}) {% endif %}</span>
                        {{ item }}
                        <span class="error-msg"></span>
                    </div>
                    {% endfor %}
                    <button type="button" class="btn btn-success" id="btnGenInviteCode">生成邀请码</button>
                </form>
                <div id="inviteArea" class="hide">
                    <hr/>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-btn">
                                <input type="button" value="邀请链接" class="btn btn-default">
                            </div>
                            <input type="text" class="form-control" id="inviteUrl">
                            <div class="input-group-btn">
                                <input type="button" value="复制链接" class="btn btn-primary" id="btnCopyUrl">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>

{% endblock %}

{% block js %}
    <script src="{% static 'web/plugin/editor.md-master/editormd.min.js' %}"></script>
    <script src="{% static 'web/plugin/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js' %}"></script>
    <script src="{% static 'web/plugin/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js' %}"></script>
    <script src="{% static 'web/plugin/bootstrap-select-1.13.14/js/bootstrap-select.js' %}"></script>
    <script src="{% static 'web/plugin/bootstrap-select-1.13.14/js/i18n/defaults-zh_CN.js' %}"></script>
    <script src="{% static 'web/plugin/select2-4.1.0-rc.0/dist/js/select2.full.min.js' %}"></script>
    <script src="{% static 'web/plugin/select2-4.1.0-rc.0/dist/js/i18n/zh-CN.js' %}"></script>
    <script>
        var WIKI_UPLOAD_URL = "{% url 'wiki_upload' project_id=request.tracer.project.id %}"
        var POST_ISSUES = "{% url 'issues' project_id=request.tracer.project.id %}"
        var INVITE_URL = "{% url 'invite_url' project_id=request.tracer.project.id %}"
        $(function (){
            bindBootStrapShowEvent();
            initDatePicker();
            bindAddSubmit();
            // 在筛选部分点击a标签前面的checkbox时，也让页面跳转到a标签的href地址
            bindClickCheckFilter();
            initSelect2();
            bindCreateInviteCode();
            bindCopyUrl()
        });
        // 点击拷贝邀请码链接
        function bindCopyUrl(){
            $('#btnCopyUrl').click(function (){
                //var textInput = document.getElementById("inviteUrl").value;
                var textInput = $('#inviteUrl')[0];
                textInput.select();
                //原来的命令:document.execCommand("copy") 已经停用，现在使用下面的来复制输入框中的内容。
                // 但是考虑到有些浏览器不兼容，所以就用异常包裹着执行下面的代码
                try {
                    // 尝试 Clipboard API
                    navigator.clipboard.writeText(textInput.value);
                  } catch (err) {
                    // 降级到 execCommand
                    document.execCommand("copy");
                  }
                alert("复制成功");


            })
        }

        // 点击生成邀请码的链接
        function bindCreateInviteCode(){
            $('#btnGenInviteCode').click(function (){
                $('.error-msg').empty();
                $.ajax({
                    url: INVITE_URL,
                    type: "POST",
                    data:$('#inviteForm').serialize(),
                    dataType: "JSON",
                    success:function (res){
                        if(res.status){
                            $('#inviteArea').removeClass('hide').find('#inviteUrl').val(res.data);
                        }else {
                            $.each(res.error,function (k,v){
                                $('#id_' + k).next('.error-msg').text(v[0]);
                            })
                        }
                    }
                })
            })
        }

        // 初始化select2
        function initSelect2(){
            $('.select2').select2({}).on('select2:select',function (e){
                //应用select2插件，并在选中某项数据时触发函数
                location.href = e.params.data.id;
                //console.log(e.params.data)

            }).on('select2:unselect',function (e){
                // 移除选中的某项时触发函数
                //console.log(e.params.data)
                location.href = e.params.data.id;

            });
        }

        // CheckBox跳转a标签的href函数。其中： .find(':checkbox') 是找到标签下面所有的checkbox标签
        function bindClickCheckFilter(){
            $('.filter-area').find(':checkbox').click(function (){
                // 当点击checkbox标签时，会跳转到当前点击标签的父标签即a标签的href属性的值的链接中
                location.href = $(this).parent().attr('href');
            })
        }

        // 模态框弹出的时候，才执行这个事件里面的函数
        function bindBootStrapShowEvent(){
            $('#addModal').on('show.bs.modal', function (event) {
                initEditorMd();
            })
        }
        /*初始化md编辑器，editormd('editor'参数editor代表的是标签id属性的值是editor的标签。textarea输入框变成md编辑器*/
        function initEditorMd(){
                editormd('editor',{
                    placeholder:"请输入内容",
                    height:300,
                    path:"{% static 'web/plugin/editor.md-master/lib/' %}",
                    imageUpload:true,
                    imageFormats:["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                    imageUploadURL:WIKI_UPLOAD_URL,
                })
        }
        // 初始化时间插件的函数，把插件通过DatePicker进行初始化。要用中文的话需要单独引入中文的js插件。
        // 初始化插件的函数由datepicker 变成了datetimepicker
        function initDatePicker(){
            $('#id_start_date,#id_end_date').datetimepicker({
                format:'yyyy-mm-dd',
                startDate:'0',
                language:'zh-CN',
                autoclose:true,
                minView:2, // 开启之后将不再显示选择小时和分钟。最小图层显示
                todayBtn:true, // 是否显示今天的按钮，点击直接选择当天的日期
            });
        }

        function bindAddSubmit(){
            $('#btnAddSubmit').click(function (){
                $('#addForm').find('.error-msg').empty();
                $.ajax({
                    url:POST_ISSUES,
                    type:'POST',
                    data:$('#addForm').serialize(),
                    dataType:'JSON',
                    success:function (res){
                        console.log(res);
                        if(res.status){
                            location.href = location.href;
                        }else {
                            $.each(res.error,function (k,v){
                                $('#id_' + k).parent().next('.error-msg').text(v[0])
                            })
                        }
                    },
                })
            })
        }

    </script>
{% endblock %}
























